<script setup lang="ts">
import { ref, reactive, computed } from 'vue';

interface PasswordForm {
  username: string;
  password: string;
}

// 收集表单数据
const passwordLoginForm = reactive<PasswordForm>({
  username: '',
  password: '',
});

// 控制密码是否可见
const passwordCanBeView = ref(false);
// 控制密码可见性的hover效果
const hover = ref(false);
// 控制登录按钮加载状态
const loginLoading = ref(false);
// 计算登录按钮是否开启禁用
const loginBtnIsDisabled = computed<boolean>(() => {
  return passwordLoginForm.username.length == 0 || passwordLoginForm.password.length == 0;
});

// 点击注册按钮触发的事件
const handleClickRegister = () => {
  // 切换为短信登录
  emit('toggleLoginModel', 'phone');
};

// 点击登录按钮触发的事件
const handleClickLogin = () => {
  console.log('submit loginData');
  loginLoading.value = true;

  setTimeout(() => {
    loginLoading.value = false;
  }, 1500);
};

const isVisible = ref(false);
const handleClickForgetBtn = () => {
  isVisible.value = true;
  document.onclick = function () {
    isVisible.value = false;
    document.onclick = null;
  };
};
const handleClickForgetMethodOne = () => {
  isVisible.value = false;
  emit('toggleLoginModel', 'phone');
};

const handleClickForgetMethodTwo = () => {};

// 接受父组件传来的自定义事件
const emit = defineEmits<{
  toggleLoginModel: [model: string];
}>();
</script>

<script lang="ts">
export default {
  name: 'PasswordForm',
};
</script>

<template>
  <form>
    <div class="flex flex-col rounded-lg" style="border: 1px solid rgb(226 232 240)">
      <div
        class="flex items-center justify-center gap-4 border-b border-solid border-slate-200 px-4 py-3"
      >
        <label for="username" class="select-none">账号</label>
        <input
          autofocus
          type="text"
          class="flex-1 bg-transparent"
          id="username"
          name="username"
          placeholder="请输入账号"
          v-model="passwordLoginForm.username"
        />
      </div>

      <div class="relative flex items-center justify-center gap-4 px-4 py-3">
        <label for="password" class="select-none">密码</label>
        <input
          :type="passwordCanBeView ? 'text' : 'password'"
          class="flex-1 bg-transparent"
          id="password"
          name="password"
          placeholder="请输入密码"
          v-model="passwordLoginForm.password"
        />
        <div class="flex">
          <el-button
            link
            :type="hover ? 'primary' : ''"
            @click.stop="passwordCanBeView = !passwordCanBeView"
            @mouseover="hover = true"
            @mouseleave="hover = false"
          >
            <el-icon v-if="passwordCanBeView"><View /></el-icon>
            <el-icon v-else><Hide /></el-icon>
          </el-button>
          <el-button link type="primary" @click.stop="handleClickForgetBtn"> 忘记密码? </el-button>
        </div>

        <div
          class="absolute right-[-120px] top-[102%] w-[240px] select-none overflow-hidden rounded-lg border-solid border-slate-400 bg-white p-3 shadow-lg"
          v-show="isVisible"
        >
          <div
            class="flex cursor-pointer flex-col gap-1 px-4 py-2 hover:bg-slate-50"
            @click.stop="handleClickForgetMethodOne"
          >
            <h1 class="text-sm font-semibold text-slate-600">发送短信快速登录</h1>
            <h3 class="text-xs text-gray-400">未注册的手机号,将帮您注册新账号</h3>
          </div>
          <div
            class="flex cursor-pointer flex-col gap-1 px-4 py-2 hover:bg-slate-50"
            @click="handleClickForgetMethodTwo"
          >
            <h1 class="text-sm font-semibold text-slate-600">去找回密码</h1>
            <h3 class="text-xs text-gray-400">通过绑定的手机号/邮箱重置密码</h3>
          </div>
        </div>
      </div>
    </div>

    <div class="mt-8 flex gap-2">
      <el-button class="flex-1 text-sm" size="large" @click="handleClickRegister"> 注册 </el-button>
      <el-button
        class="flex-1 text-sm"
        size="large"
        type="primary"
        :disabled="loginBtnIsDisabled"
        @click.stop="handleClickLogin"
        :loading="loginLoading"
      >
        登录
      </el-button>
    </div>
  </form>

  <!-- <el-form
    label-position="left"
    label-width="60px"
    :model="passwordLoginForm"
    ref="rulePasswordFormRef"
  >
    <el-form-item label="账号">
      <el-input
        v-model="passwordLoginForm.name"
        type="text"
        placeholder="请输入账号"
      />
    </el-form-item>
    <el-form-item label="密码">
      <div class="flex flex-1 justify-between items-center gap-4 rounded-lg">
        <el-input
          v-model="passwordLoginForm.password"
          type="password"
          placeholder="请输入密码"
          show-password
          input-style="border:none;"
        />
        <el-button link type="primary">忘记密码?</el-button>
      </div>
    </el-form-item>

    <div class="flex">
      <el-button class="flex-1" size="large">注&emsp;册</el-button>
      <el-button class="flex-1" size="large" type="primary" disabled>
        登&emsp;录
      </el-button>
    </div>
  </el-form> -->
</template>

<style scoped>
/* 媒体查询 */

/* 移动端 */
@media screen and (width <= 767px) {
}

/* 平板竖版 */
@media screen and (width >= 768px) and (width <= 991px) {
}

/* 平板横版 */
@media screen and (width >= 992px) and (width <= 1199) {
}

/* PC电脑端 */
@media screen and (width >= 1200px) {
}
</style>
